<template>
  <div style="margin-bottom: 50px">
    <el-tree ref="tree" show-checkbox :data="treeData" @check-change="checkChange" :props="props" node-key="id"
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <!-- <span>
          <el-button type="text" size="mini" @click="() => append(data)">
            Append
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            Delete
          </el-button>
        </span> -->
        <el-radio-group :disabled="data.roleDisabled" v-model="data.roleCode" @change="onTriggerProjectRole(data)">
          <el-radio :label="Role.guest">{{ $t('visitor') }}</el-radio>
          <el-radio :label="Role.dev">{{ $t('developer') }}</el-radio>
          <el-radio :label="Role.admin">{{ $t('admin') }}</el-radio>
        </el-radio-group>
      </span>
    </el-tree>
    <div style="padding-top: 20px;float: right">
      <el-button type="text" @click="on_cancel" style="margin-right: 10px">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="on_ok">{{ $t('save') }}</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ProjectSelect',
  props: {
    onOk: {
      type: Function,
      default: () => { }
    },
    onCancel: {
      type: Function,
      default: () => { }
    }
  },
  data() {
    return {
      treeData: [],
      props: {
        label: 'label',
        children: 'children',
        disabled: 'disabled'
      },
      radioDisabled: true
    }
  },
  methods: {
    reload(projectIds, userId) {
      this.get('/admin/project/tree?userId=' + userId, {}, resp => {
        this.treeData = resp.data

        this.$nextTick(() => {
          const nodesMap = this.$refs.tree.store.nodesMap
          for (const i in nodesMap) {
            nodesMap[i].expanded = true
          }
          if (projectIds) {
            this.$refs.tree.setCheckedKeys(projectIds)
          }
        })
      })
    },
    on_ok() {
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      // console.log('checkedNodes', checkedNodes)
      checkedNodes.forEach(item => {
        if(item.isProject===1){
          item.parentId = item.parentId.substr(2)
        }
        else{
          item.id = item.id.substr(2)
        }
      })
      const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes(true)
      halfCheckedNodes.forEach(item => {
        item.id = item.id.substr(2)
        checkedNodes.push(item)
      })
      //const nodes=checkedNodes.concat(halfCheckedNodes)


      const checkedItems = checkedNodes.map(item => ({ id: item.id, isProject: item.isProject, roleCode: item.roleCode, parentId: item.parentId }))
      console.log('checkedItems', checkedItems)
      // const projectIds = nodes.map(row => row.id)
      this.onOk(checkedItems)
    },
    on_cancel() {
      this.onCancel()
    },
    onTriggerProjectRole(data) {
      if (data.isProject === 1) return
      console.log('onTriggerProjectRole', data)
    },
    checkChange(data, v1, v2) {
      console.log('checkChange', v1, v2)
      if (data.isProject === 0) {
        // 空间
        if ((v2 || v1)) {
          if (!data.roleCode)
            data.roleCode = 'guest'
        }
        else {
          data.roleCode = ''
        }
      }
      else {
        //项目
        if (!v1) {
          data.roleCode = ''
          data.roleDisabled = true
          var checkCnt = this.$refs.tree.getCheckedNodes(true).filter(item=>item.parentId===data.parentId).length;
          if (checkCnt === 0) {
            this.treeData.filter(item => item.id === data.parentId).forEach(p => {
              p.roleCode = ''
              p.roleDisabled = true;
            })
          }
        }
        else {
          data.roleCode = 'guest'
          data.roleDisabled = false
          this.treeData.filter(item => item.id === data.parentId).forEach(p => {
            if (!p.roleCode) p.roleCode = 'guest'
            if (p.roleDisabled) p.roleDisabled = false;
          })
        }
      }
      console.log('checkChange', data, v1, v2)
    }
  }
}
</script>
